import { Button, Divider, Popconfirm, Menu, message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, history } from 'umi'
import { queryRule, addSalaryBand, updateSalaryBand, deleteSalaryBand } from '../service'
import { employeeStateArray, socialTraineeStateArray, employeeStateList, isOfferList } from '@/utils/constant'
import { findItemByTree } from '@/utils/functions'
import CreateForm from './components/CreateForm'
import moment from 'moment'

const TableList = ({global}) => {
  const { options = {} } = global
  const { orgLine = [], orgSystem = [], jobLevel = [] } = options
  const actionRef = useRef()
  const [done, setDone] = useState(false)
  const [visible, setVisible] = useState(null)
  const [current, setCurrent] = useState(undefined)

  const itemEdit = (item) => {
    setVisible(true)
    setCurrent(item)
  }

  const handleModalVisible = (value) => {
    setVisible(value)
  }

  const columns = [
    {
      title: '关键字搜索',
      dataIndex: 'keyword',
      hideInTable: true,
    },
    {
      title: '编号',
      dataIndex: 'oid',
      hideInSearch: true,
    },
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '公司',
      dataIndex: 'orgname',
      hideInSearch: true,

    },
    {
      title: '部门',
      dataIndex: 'unitname',
      hideInSearch: true,
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
      hideInSearch: true,
    },
    {
      title: '薪资组',
      dataIndex: 'salaryGroup',
      hideInSearch: true,
    },
    {
      title: '分配日期',
      dataIndex: 'salaryGroup',
      hideInSearch: true,
    },
    {
      title: '发薪单位',
      dataIndex: 'salaryGroup',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          <a onClick={() => itemEdit(record)}>修改</a>
          <Divider type="vertical"/>
          <a onClick={() => itemDetail(record)}>详情</a>
        </>
      ),
    },
  ]

  const handleCancel = () => {
    setVisible(false)
  }

  const handleSubmit = (values) => {
    setDone(true)
    setVisible(false)
    if(!values.id) {
      addSalaryBand(values).then((res)=>{
        actionRef.current.reload()
      })
    } else {
      updateSalaryBand(values).then((res)=>{
        actionRef.current.reload()
      })
    }
  }

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="oid"
        request={(params) => queryRule(params)}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          // <Button type="primary" onClick={() => handleModalVisible(true)}>
          //   <PlusOutlined/> 新建
          // </Button>,
        ]}
      />
      <CreateForm
        values={{}}
        done={done}
        current={current}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
}

export default connect(({ global }) => ({
  global
}))(TableList)
